<!--vue模板-->
<template>
  <!--树形下拉列表-->
  <el-tree
    ref="tree"
    node-key="id"
    :props="defaultProps"
    :data="data"
    default-expand-all
    show-checkbox
    class="tree"
  />
</template>

<!--vue 组件选项定义-->
<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "childs",
        label: "name",
        value: "id",
      },
    };
  },

  props: {
    roleId: {
      type: String,
      default: "",
    },
  },

  $emit: ["update:parentid"],

  methods: {
    getCheckedKey() {
      let obj = this.$refs.tree;
      let all = obj.getCheckedKeys();
      let half = obj.getHalfCheckedKeys();
      return { all, half };
    },
    chg(node) {
      console.log("node>>>>", node.id);
      //更新父组件 对应当前属性parentid的值
      this.$emit("update:parentid", node.id);
    },
    queryTree() {
      this.$http.get("/api/menu/tree", {}).then((res) => {
        if (res.code == 200) {
          this.data = res.result;
          //
          this.queryAuth();
        }
      });
    },
    //根据角色id查询对应权限
    queryAuth() {
      if (!this.roleId) {
        this.$refs.tree.setCheckedKeys([]);
        return;
      }
      //查询
      this.$http.get("/api/role/auth", { id: this.roleId }).then((res) => {
        if (res.code == 200) {
          this.$refs.tree.setCheckedKeys(res.result);
        }
      });
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.tree {
  border: #c0c4cc solid 1px;
  border-radius: 5px;
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}
</style>
